<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="../css/student.css">
<link rel="stylesheet" href="../css/studentAsk.css">
<script src="../js/jquery.js"></script>
<script src="../js/stundetindex.js"></script>
<script src="../js/studentindex-two.js"></script>
<script src="../js/addLike.js"></script>
<script src="../js/ask.js"></script>
<script src="../js/check.js"></script>

<style>
    .baowei {
        width: 300px;
        height: 100px;
        background-color: rgba(243, 243, 243, 0.685);
        border-radius: 5px;
    }
    
    .kaoqinbao {
        height: 40px;
        width: 100%;
        background-color: #dddddd;
        border-radius: 5px;
    }
    
    .kaoqin {
        color: black;
        font-size: 18px;
        /*距离左边边框距离*/
        /*距离上边边框距离*/
    }
    
    .qiandaotui {
        height: 60px;
        width: 100%;
        position: relative;
    }
    
    #qiandao {
        /*绝对定位*/
        width: 100%;
        position: absolute;
        text-align: center;
        top: 10px;
        left: 0;
        bottom: 22px;
        margin: auto;
        background-color: #56a1db;
        color: white;
    }
    /*签到样式*/
    
    * {
        margin: 0;
        padding: 0;
    }
    
    .qiandaoshijian {
        display: flex;
    }
    
    .qiandaoshijian p {
        width: 45px;
        font-size: 40px;
        text-align: center;
        font-weight: 500;
    }
</style>

<body>

    <!-- 遮罩层 -->
    <div class="mask">
        <div class="xians"><span>显示聊天框</span></div>
        <div class="w">
            <div class="tell">
                <div class="tell-top">
                    <div class="getAsk"><a href="#">查询聊天记录</a>
                        <img class="tell-close" src="../img/关闭.png" alt="">

                        <img class="tell-close1" src="../img/缩小.png" alt="">
                        <img class="tell-close11" src="../img/放大.png" alt="">

                        <img class="tell-close2" src="../img/横杠.png" alt="">

                    </div>

                    <!-- 呈现数据 -->
                    <div class="studentTitle" id="studentTitle">
                    </div>
                </div>

                <div class="tell-bottom">
                    <ul class="tell-icons">
                        <li>
                            <a class="expression" href="#"><img class="tell-img" src="../img/表情.png" alt=""></a>
                        </li>

                        <li>
                            <a href="#"><img class="tell-img" src="../img/GIF.png" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img class="tell-img" src="../img/剪刀 剪切.png" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img class="tell-img" src="../img/文件夹.png" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img class="tell-img" src="../img/图片.png" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img class="tell-img" src="../img/点.png" alt=""></a>
                        </li>





                    </ul>
                    <textarea class="tell-input" name="" id="" cols="25" rows="10"></textarea>
                    <div class="tell-submit">
                        <span class="tell-submit-span">发送</span>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="wrap">
        <div class="content-wrap middle"></div>
        <div class="like-wrap middle"><i class="fas fa-heart"></i></div>
    </div>
    <div class="header">
        <!-- <span class="cloud"></span> -->
        <div class="header-left">
            <h2>学生教室平台</h2>
        </div>
        <ul class="nav">
            <li class="nav-son">
                <a href="#" id="usermessage">个人信息</a>
                <div class="getmessage">
                    <ul class="messages">
                        <li>姓名:</li>
                        <li>邮箱:</li>
                        <li>学分:</li>
                        <li>学号:</li>
                        <li>班级:</li>

                    </ul>
                    <span class="close">×</span>
                </div>
            </li>
            <li class="nav-son">
                <a href="#" class="askTeacher">咨询老师</a>

                <!-- <ul class="item">
                    <li><a href="">私信</a></li>
                    <li><a href="">评论</a></li>
                    <li><a href="">@我</a></li>
                </ul> -->
            </li>

            <li class="nav-son">
                <a href="#" class="userleave">leave</a>
                <ul class="item">
                    <li><a class="tuichu">退出登录</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="center">
        <!-- 个人信息 -->
        <div class="center-left">
            <!-- 签到 -->
            <!-- <button class="qiandao" id="qiandao">签到 </button> -->
            <div class="qiandao baowei">
                <div class="kaoqinbao">
                    <div class="kaoqin">考勤签到功能</div>
                </div>
                <div class="qiandaoshijian">
                    <p id="1">0</p>
                    <p id="2">0</p>
                    <p id="3">:</p>
                    <p id="4">0</p>
                    <p id="5">0</p>
                    <p id="6">:</p>
                    <p id="7">0</p>
                    <p id="8">0</p>
                </div>
                <div class="qiandaotui">
                    <button id="qiandao">进入教室</button>
                </div>
            </div>
        </div>

        <div class="center-right">
            <div class="comment-top">
                <!-- 呈现数据 -->
                <div class="comment">
                </div>

            </div>
            <div class="comment-bottom">
                <div class="comment-icon">
                    <div class="coment-img">
                        <img id="user" src="./image/user.png" alt="">
                    </div>

                    <div class="coment-img1">
                        <img src="./image/heart.png" alt="">
                    </div>

                    <div id="ass" class="coment-img1">
                        <img src="./image/like.png" alt="">
                    </div>
                </div>
                <textarea class="comment-input" name="" id="" cols="25" rows="10"></textarea>
                <span class="comment-submit">发送</span>
            </div>
        </div>

    </div>
    <script>
        window.onload = function() {
            var w = document.querySelector('.w');
            var xians = document.querySelector('.xians')
            var tellclose1 = document.querySelector('.tell-close1');
            var tellclose2 = document.querySelector('.tell-close2');
            var tellclose11 = document.querySelector('.tell-close11')
            tellclose1.addEventListener('click', function() {
                w.style.width = '100%';
                w.style.height = '100%';
                w.style.marginTop = '0px';
                this.style.display = 'none';
                tellclose11.style.display = 'block';
            })

            tellclose11.addEventListener('click', function() {
                w.style.width = '50%';
                w.style.height = '80%';
                w.style.marginTop = '100px';
                tellclose1.style.display = 'block';
                this.style.display = 'none';
            })
            tellclose2.addEventListener('click', function() {
                w.style.display = 'none';
                xians.style.display = 'block';


            })
            xians.addEventListener('click', function() {
                w.style.display = 'block';
                this.style.display = 'none';

            })
        }
    </script>
</body>

</html>